<template>
  <el-container>
    <el-header>
      <!-- 头部 -->
      <div class="head-left">
        <i class="el-icon-s-fold"></i>
        <span>意向学员</span>
      </div>
      <section>
        <i class="el-icon-search"></i>
        <i class="el-icon-bell"></i>
        <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        >{{this.$store.state.loginName}}</el-avatar>
      </section>
      <!--头部结束  -->
    </el-header>
    <el-main class="main">
      <div class="main-head">
        <span>
          <span>校&nbsp;&nbsp;区：</span>
          <!-- <el-cascader :props="props" placeholder="包河校区"></el-cascader> -->
          <el-select v-model="value001" placeholder="请选择">
            <el-option
              v-for="item in options001"
              :key="item.value001"
              :label="item.label"
              :value="item.value001"
            ></el-option>
          </el-select>
        </span>
      </div>
      <div class="main-content">
        <div class="main-content-top">
          <div class="content-top-left">
            <h3>学员数据变动</h3>
            <div class="content-top-left-today">
              <span>
                <p>今日新增意向学员</p>
                <h4>23</h4>
              </span>
              <span>
                <p>转报名人数</p>
                <h4>134</h4>
              </span>
            </div>
            <div class="content-top-left-conversion">
              <span>
                <p>转化率</p>
                <h4>56%</h4>
              </span>
            </div>
          </div>
          <div class="content-top-center">
            <section class="content-center-bing">
              <h3>学员招生来源占比</h3>
              <div id="shanOne" :style="{width: '200px', height: '200px'}"></div>
              <ul class="bingul">
                <li>
                  <img src="../assets/bluepoint.png" /> 地摊活动
                  <span>|</span> 36%
                </li>
                <li>
                  <img src="../assets/purplepoint.png" /> 电话邀约
                  <span>|</span> 20%
                </li>
                <li>
                  <img src="../assets/point3.png" /> 门店到访
                  <span>|</span> 16%
                </li>
                <li>
                  <img src="../assets/point4.png" /> 转介绍
                  <span>|</span> 10%
                </li>
                <li>
                  <img src="../assets/purplepoint.png" /> 一中
                  <span>|</span> 9%
                </li>
                <li>
                  <img src="../assets/point3.png" /> 其他
                  <span>|</span> 9%
                </li>
              </ul>
            </section>
          </div>

          <div class="content-top-right">
            <h3>学员人数趋势图</h3>
            <div id="zhexian" :style="{width: '340px', height: '240px'}"></div>
          </div>
        </div>
        <div class="main-content-bottom">
          <div class="main-content-bottom-select">
            <div class="fenzu">
              <span>分组：</span>
              <el-select v-model="value01" placeholder="请选择">
                <el-option
                  v-for="item in options01"
                  :key="item.value01"
                  :label="item.label"
                  :value="item.value01"
                ></el-option>
              </el-select>
            </div>
            <div class="search">
              <span>招生来源：</span>
              <el-select v-model="value02" placeholder="请选择">
                <el-option
                  v-for="item in options02"
                  :key="item.value02"
                  :label="item.label"
                  :value="item.value02"
                ></el-option>
              </el-select>
            </div>
            <div class="laiyuan">
              <span>搜索：</span>
              <template>
                <el-input placeholder="请输入内容" v-model="input4">
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </template>
            </div>
          </div>
          <div class="main-content-bottom-time">
            <template>
              <div class="block">
                <span class="demonstration">选择日期:</span>
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="2020-05-20"
                  end-placeholder="2020-08-01"
                ></el-date-picker>
              </div>
            </template>
          </div>
          <div class="main-content-bottom-bar">
            <div class="main-content-bottom-bar-left">
              <span>学员数目</span>
              <p>{{tableData.length}}</p>
            </div>
            <div class="main-content-bottom-bar-right">
              <!-- 点击 -->
              <el-button type="danger" @click="dialogFormVisible = true">+ 添加学员</el-button>
              <!-- 弹出表单 -->
              <el-dialog title=" 添加学员" :visible.sync="dialogFormVisible">
                <div class="form">
                  <div class="stuName">
                    <h3>学员姓名：</h3>
                    <el-input
                      type="text"
                      placeholder="请输入学生姓名，不超过20个字"
                      v-model="text"
                      maxlength="20"
                      show-word-limit
                    ></el-input>
                  </div>
                  <div class="stuBirthday">
                    <h3>日期：</h3>
                    <div class="block">
                      <el-date-picker v-model="value2" type="date" placeholder="选择日期"></el-date-picker>
                    </div>
                  </div>
                  <div class="stuNum">
                    <h3>联系电话：</h3>
                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                  </div>
                  <div class="stuSchool">
                    <h3>咨询校区：</h3>
                    <el-select v-model="valueSchool" placeholder="请选择">
                      <el-option
                        v-for="item in optionsSchool"
                        :key="item.valueSchool"
                        :label="item.label"
                        :value="item.valueSchool"
                      ></el-option>
                    </el-select>
                  </div>
                  <div class="stuFrom">
                    <h3>招生来源：</h3>
                    <el-select v-model="value4" placeholder="请选择">
                      <el-option
                        v-for="item in options4"
                        :key="item.value4"
                        :label="item.label"
                        :value="item.value4"
                      ></el-option>
                    </el-select>
                  </div>
                  <div class="stusTate">
                    <h3>跟踪状态：</h3>
                    <el-select v-model="value5" placeholder="请选择">
                      <el-option
                        v-for="item in options5"
                        :key="item.value5"
                        :label="item.label"
                        :value="item.value5"
                      ></el-option>
                    </el-select>
                  </div>
                  <div class="stuIntention">
                    <h3>意向程度：</h3>
                    <el-select v-model="value6" placeholder="请选择">
                      <el-option
                        v-for="item in options6"
                        :key="item.value6"
                        :label="item.label"
                        :value="item.value6"
                      ></el-option>
                    </el-select>
                  </div>
                  <div class="stuClue">
                    <h3>线索：</h3>
                    <el-input v-model="inputClue" placeholder="请输入内容"></el-input>
                  </div>
                  <div class="stuEntered">
                    <h3>录入人：</h3>
                    <el-select v-model="value8" placeholder="请选择">
                      <el-option
                        v-for="item in options8"
                        :key="item.value8"
                        :label="item.label"
                        :value="item.value8"
                      ></el-option>
                    </el-select>
                  </div>
                </div>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="[dialogFormVisible = false,open1()]">取 消</el-button>
                  <el-button
                    type="primary"
                    @click="[addStu(),dialogFormVisible = false,open2()]"
                  >确 定</el-button>
                </div>
                </el-dialog>
                  <el-button>线索列表</el-button>
                  <el-button>试听列表</el-button>
                  <el-button>导出学员</el-button>
                  <el-button>分组管理</el-button>
                  <el-button>下载导入模板</el-button>
                  <el-button>导入学员</el-button>
                  <el-button>删除</el-button>
                  <el-button>删除记录</el-button>
            </div>
          </div>
          <div class="main-content-bottom-form">
            <template>
              <el-table :data="tableData.slice((currentPage3 - 1) * pagesize, currentPage3 * pagesize)"
              @selection-change="handleSelectionChange"
              >
                <el-table-column prop="name" label="姓名" width="70"></el-table-column>
                <el-table-column prop="date" label="日期" width="100"></el-table-column>
                <el-table-column prop="birthday" label="出生日期" width="100"></el-table-column>
                <el-table-column prop="telephone" label="电话" width="120"></el-table-column>
                <el-table-column prop="address" label="咨询校区" width="80"></el-table-column>
                <el-table-column prop="from" label="招生来源" width="80"></el-table-column>
                <el-table-column prop="state" label="跟踪状态" width="100"></el-table-column>
                <el-table-column prop="intention" label="意向程度" width="80"></el-table-column>
                <el-table-column prop="entryTime" label="录入时间" width="140"></el-table-column>
                <el-table-column prop="entryPeople" label="录入人" width="70"></el-table-column>
                <el-table-column prop="clue" label="线索" width="100"></el-table-column>
                <el-table-column prop="operation" label="操作" width="50"></el-table-column>
                <el-table-column prop="operation2" width="50"></el-table-column>
                <el-table-column prop="operation3" width="50"></el-table-column>
                <el-table-column prop="operation4" width="100"></el-table-column>
              </el-table>
            </template>
          </div>
          <div class="main-content-bottom-pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-sizes="[10, 10]"
              :page-size="pagesize"
              layout="prev, pager, next, sizes, total,jumper"
              :total="this.tableData.length"
            ></el-pagination>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<style scoped>
.bingul {
  list-style: none;
  width: 40%;
  position: absolute;
  left: 220px;
  top: 40px;
}
.bingul li {
  margin-top: 16px;
}
</style>

<script>
let id = 0;

export default {
  name: "showOff-item4",
  data() {
    return {
      input4: "",
      // 校区
      options001: [
        {
          value001: "选项1",
          label: "宝安校区",
        },
        {
          value001: "选项2",
          label: "南山校区",
        },
        {
          value001: "选项3",
          label: "福田校区",
        },
        {
          value001: "选项4",
          label: "罗湖校区",
        },
        {
          value001: "选项5",
          label: "盐田校区",
        },
      ],
      value001: "宝安校区",
      options: [],
      value: [],
      list: [],
      loading: false,
      states: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        "Colorado",
        "Connecticut",
        "Delaware",
        "Florida",
        "Georgia",
        "Hawaii",
        "Idaho",
        "Illinois",
        "Indiana",
        "Iowa",
        "Kansas",
        "Kentucky",
        "Louisiana",
        "Maine",
        "Maryland",
        "Massachusetts",
        "Michigan",
        "Minnesota",
        "Mississippi",
        "Missouri",
        "Montana",
        "Nebraska",
        "Nevada",
        "New Hampshire",
        "New Jersey",
        "New Mexico",
        "New York",
        "North Carolina",
        "North Dakota",
        "Ohio",
        "Oklahoma",
        "Oregon",
        "Pennsylvania",
        "Rhode Island",
        "South Carolina",
        "South Dakota",
        "Tennessee",
        "Texas",
        "Utah",
        "Vermont",
        "Virginia",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming",
      ],
      value1: "",
      value2: "",
      // 分页器
      currentPage3: 1,
      // 弹出表单
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "80px",
      // 弹出表单
      text: "",
      radio: "1",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      value2: "",
      input: "",
      // 分组
      options01: [
        {
          value01: "一组",
          label: "一组",
        },
        {
          value01: "二组",
          label: "二组",
        },
        {
          value01: "三组",
          label: "三组",
        }
      ],
      value01: "二组",
      // 招生来源
      options02: [
        {
          value02: "地推活动",
          label: "地推活动",
        },
        {
          value02: "校招",
          label: "校招",
        },
        {
          value02: "海选",
          label: "海选",
        },
        {
          value02: "捡的",
          label: "捡的",
        },
        {
          value02: "买的",
          label: "买的",
        },
      ],
      value02: "地推活动",

      // 弹出表单
      // 咨询校区
      optionsSchool: [
        {
          valueSchool: "宝安校区",
          label: "宝安校区",
        },
        {
          valueSchool: "南山校区",
          label: "南山校区",
        },
        {
          valueSchool: "福田校区",
          label: "福田校区",
        },
        {
          valueSchool: "罗湖校区",
          label: "罗湖校区",
        },
        {
          valueSchool: "盐田校区",
          label: "盐田校区",
        },
      ],
      valueSchool: "",
      //
      options4: [
        {
          value4: "地推",
          label: "地推",
        },
        {
          value4: "介绍",
          label: "介绍",
        },
        {
          value4: "合作",
          label: "合作",
        },
      ],
      value4: "",
      // 跟踪状态
      options5: [
        {
          value5: "跟踪中",
          label: "跟踪中",
        },
        {
          value5: "不在跟踪",
          label: "不在跟踪",
        },
        {
          value5: "即将成单",
          label: "即将成单",
        },
      ],
      value5: "",
      options6: [
        {
          value6: "满意",
          label: "满意",
        },
        {
          value6: "不满意",
          label: "不满意",
        },
        {
          value6: "一般",
          label: "一般",
        },
      ],
      value6: "",
      inputParent: "",
      radioA: 3,
      inputClue: "",
      options7: [
        {
          value7: "一组",
          label: "一组",
        },
        {
          value7: "二组",
          label: "二组",
        },
        {
          value7: "三组",
          label: "三组",
        },
      ],
      value7: "",
      options8: [
        {
          value8: "李老师",
          label: "李老师",
        },
        {
          value8: "王校长",
          label: "王校长",
        },
        {
          value8: "张老师",
          label: "张老师",
        },
      ],
      value8: "",
      
      // 分页器
      tableData: [], //数据信息
      currentPage3: 1,//默认显示第一页
      pagesize: 10, //每页显示条数
    };
  },
  mounted() {
    this.$axios
        .get("/app/mock/264777/example/1598250282731")
        .then((res) => {
          this.tableData = res;
        })
        .catch((err) => console.log(err));
    
    this.drawBing();
    this.zhexian();
  },
  methods: {
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    //切换页码
    handleCurrentChange(cpage) {
      this.currentPage3 = cpage;
    },
    // 分页器
    handleSizeChange(psize) {
      this.pagesize = psize;
    },
    handleSelectionChange(val) {
      console.log(val);
    },
    // 添加学员
    addStu() {
      // console.log(new Date(Date.now()))

      var d = this.value2;
      var timer =
        d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();

      var d2 = new Date(Date.now());
      var timer2 =
        d2.getFullYear() + "-" + (d2.getMonth() + 1) + "-" + d2.getDate();
      this.tableData.push({
        date: timer,
        name: this.text,
        birthday: "2010-1-1",
        telephone: this.input,
        address: this.valueSchool,
        from: this.value4,
        state: this.value5,
        intention: this.value6,
        entryTime: timer2,
        entryPeople: this.value8,
        clue: this.inputClue,
        operation: "报名",
        operation2: "编辑",
        operation3: "试听",
        operation4: "添加线索",
      });
    },
    drawBing() {
      // 初始化实例，获取元素
      let shanOne = this.$echarts.init(document.getElementById("shanOne"));
      // 绘制图表
      shanOne.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: [],
        },
        color: [
          "#6DD48B",
          "#3AA0FF",
          "#36CBCB",
          "#975FE3",
          "#F2637B",
          "#FAD337",
        ],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 335, name: "地推活动" },
              { value: 310, name: "电话邀约" },
              { value: 234, name: "门店到访" },
              { value: 250, name: "转介绍" },
              { value: 460, name: "一中" },
              { value: 345, name: "其他" },
            ],
          },
        ],
      });
    },
    zhexian() {
      let zhexian = this.$echarts.init(document.getElementById("zhexian"));
      zhexian.setOption({
        xAxis: {
          type: "category",
          data: ["7-14", "7-16", "7-18", "7-20", "7-22", "7-24", "7-26"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [26, 48, 72, 55, 88, 56, 67, 43],
            type: "line",
          },
        ],
      });
    },
    open2() {
      this.$message({
        message: "添加成功!",
        type: "success",
      });
    },
    open1() {
      this.$message("您没有添加哦!");
    },
  },
};
</script>

<style scoped>  
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 25px;
}
.el-header .head-left {
  display: flex;
  align-items: center;
}
.el-header .head-left i {
  font-size: 28px;
  color: #686868;
  margin-right: 30px;
}
.el-header .head-left span {
  font-size: 14px;
  color: #686868;
}
.el-header section {
  display: flex;
  align-items: center;
}
.el-header section i {
  font-size: 24px;
  color: #7a7a7a;
  margin-right: 20px;
}

.main-content-top {
  display: flex;
  justify-content: space-between;
}
.main-content-top div {
  margin-right: 10px !important;
}
.main-head {
  width: 100%;
  height: 50px;
}
.main-head > span {
  float: right;
}
.content-top-left {
  width: 310px;
  height: 290px;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 0 25px;
  font-family: Helvetica;
}
.content-top-left h3 {
  font-size: 16px;
  font-weight: 700;
  width: 310px;
  height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
  display: block;
}
.content-top-left-today {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content-top-left-today span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
}
.content-top-left-today span p {
  color: #929292;
  font-size: 14px;
  margin-bottom: 10px;
}
.content-top-left-today span h4 {
  font-size: 28px;
  font-weight: 400;
}
.content-top-left-conversion {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.content-top-left-conversion span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.content-top-left-conversion span p {
  color: #929292;
  font-size: 14px;
}
.content-top-left-conversion span h4 {
  font-size: 32px;
  font-weight: 400;
}
.content-top-center {
  width: 470px;
  height: 290px;
  background-color: #fff;
  padding: 0 25px;
  position: relative;
}
.content-top-center h3 {
  font-size: 16px;
  font-weight: 700;
  height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
  display: block;
}
.content-top-right {
  width: 470px;
  height: 290px;
  background-color: #fff;
  border-radius: 5px;
  padding: 0 25px;
}
.content-top-right h3 {
  font-size: 16px;
  font-weight: 700;
  height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
  display: block;
}

/* bottm */
.main-content-bottom {
  width: 100%;
  min-height: 800px;
  background-color: #fff;
  margin-top: 30px;
  border-radius: 5px;
}
.main-content-bottom-select {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding-left: 15px;
}
.main-content-bottom-select > div {
  margin-right: 40px;
}
.main-content-bottom-select > div span {
  font-size: 14px;
}
.search {
  width: 350px;
}
/* 日期 */
.main-content-bottom-time {
  padding-left: 15px;
  margin-top: 10px;
}
.main-content-bottom-time .demonstration {
  margin-right: 10px;
}
.main-content-bottom-bar {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px 0;
  /* background: wheat; */
}
.main-content-bottom-bar-left {
  width: 150px;
  display: flex;
  align-items: center;
}
.main-content-bottom-bar-left span {
  margin-right: 10px;
}
.el-button--danger {
  color: #fff;
  background-color: red;
  border-color: red;
  margin-right: 10px;
}
/* 分页器 */
.main-content-bottom-pagination {
  height: 80px;
  display: flex;
  align-items: center;
  padding-left: 590px;
}

/* 添加学员 */
.form {
  padding: 10px 15px;
  background: #fff;
}
.form div {
  display: flex;
  height: 50px;
  align-items: center;
}
.form div h3 {
  font-size: 14px;
  font-weight: 400;
  width: 80px;
  text-align: right;
  display: block;
}
.el-input {
  width: 80%;
}
.el-select {
  width: 80%;
  left: 0;
}
</style>
